import { ConfigProvider, Form, Input } from "antd";
import React, { useContext, useEffect, useState } from "react";
import { DesignFrameworkContext } from "./DesignFramework";
import useDesignActions from "./useDesignActions";

const DesignSetter = () => {
  const [form] = Form.useForm();
  const [setterEl, setSetterEl] = useState<any>(null);
 const {updateDesign} = useDesignActions()
  const { setters, currentDesign,  } = useContext(
    DesignFrameworkContext
  );
  useEffect(() => {
    if (currentDesign && currentDesign.properties) {
      let XComponent = setters[`${currentDesign.properties["x-component"]}Setter`];

      setSetterEl(XComponent ? <XComponent key={currentDesign._id} /> : null);
    } else {
      setSetterEl(null);
    }
  }, [currentDesign, setters]);
  useEffect(() => {
    if (currentDesign.properties) {
      form.resetFields();
      form.setFieldsValue(currentDesign.properties["x-component-props"]);
    }
  }, [currentDesign._id]);
  const onValuesChange = () => {
    const values = form.getFieldsValue();
    console.log("valuesvalues", values);
    const props = currentDesign.properties["x-component-props"];
    currentDesign.properties["x-component-props"] = {
      ...props,
      ...values,
    };

    updateDesign();
  };
  return (
    <ConfigProvider componentSize="small">
      <Form form={form} onValuesChange={onValuesChange}>
        <Form.Item label="背景"> 
            <Input/>
        </Form.Item>
        {setterEl}
      </Form>
    </ConfigProvider>
  );
};
export default DesignSetter;
